<template>
	<div>
		<z-form ref="zFormRef" :form-render="formRender" :form-options="formOptions" :data="testForm" :form-type="pageType"></z-form>
		<a-row>
			<a-button @click="handleSave" style="margin-right: 8px" type="primary"> 提交</a-button>
			<a-button @click="handleReset" style="margin-right: 8px" type="primary"> 重置</a-button>
			<a-button @click="handleSetVal('name', '122sss')" style="margin-right: 8px" type="primary"> 模拟编辑初始值</a-button>
		</a-row>
		<a-row :style="{ marginTop: '20px' }">
			<a-button @click="handleSetPageType('read')" style="margin-right: 8px" type="primary">查看模式 </a-button>
			<a-button @click="handleSetPageType('edit')" style="margin-right: 8px" type="primary">编辑模式 </a-button>
		</a-row>
		<!-- 查询编写人 -->
		<a-modal :width="1200" :closable="true" v-model="publisherVisible" :maskClosable="false" title="查询用户">
			<search-user-table></search-user-table>

			<template slot="footer">
				<a-button @click="publisherVisible = !publisherVisible">关闭</a-button>
			</template>
		</a-modal>
	</div>

	<!-- 查询编写人 -->
</template>

<script>
// import searchUserTable from '@/components/comSearchTable/searchUserTable.vue';
export default {
	// components: {
	// 	searchUserTable,
	// },
	data() {
		return {
			formRender: [
				{
					type: 'row',
					name: '行',
					props: {
						labelCol: { span: 8 },

						wrapperCol: { span: 16 },
					},
					children: [
						{
							type: 'input',
							model: 'name',
							label: '输入框',
							span: 8,
							validate: [
								{
									required: true,
									message: '不能为空',
									trigger: 'blur',
								},
							],
						},
						{
							type: 'input',
							model: 'name1',
							label: '输入框不校验',
							span: 8,
						},
						{
							type: 'select',
							model: 'selectlist',
							label: '下拉框',
							span: 8,
							validate: [
								{
									required: true,
									message: '不能为空',
									trigger: 'change',
								},
							],
						},
					],
				},
				{
					type: 'row',
					name: '行',
					props: {
						labelCol: { span: 8 },
						wrapperCol: { span: 16 },
					},
					children: [
						{
							type: 'textarea',
							model: 'textarea1',
							label: '描述',
							span: 8,
							validate: [
								{
									required: true,
									message: '不能为空',
									trigger: 'blur',
								},
							],
						},
						{
							type: 'date',
							model: 'date1',
							label: '日期',
							span: 8,
							validate: [
								{
									required: true,
									message: '不能为空',
									trigger: 'change',
								},
							],
						},
						{
							type: 'inputSearch',
							model: 'departname',
							label: '查询人员1',
							span: 8,
							on: {
								search: () => {
									this.handleOpenPublisher();
								},
							},
							validate: [
								{
									required: true,
									message: '不能为空',
									trigger: 'change',
								},
							],
						},
					],
				},
				{
					type: 'row',
					name: '行',
					props: {
						labelCol: { span: 8 },
						wrapperCol: { span: 16 },
					},
					children: [
						{
							type: 'radio',
							model: 'radiolist',
							label: '单选',
							span: 8,
							validate: [
								{
									required: true,
									message: '不能为空',
									trigger: 'change',
								},
							],
						},
						{
							type: 'radio',
							model: 'radiolist1',
							label: '单选不校验',
							span: 8,
						},
						// {
						// 	type: 'upload',
						// 	model: 'enclosure',
						// 	label: '上传附件',
						// 	span: 8,
						// },
					],
				},
			],
			formOptions: {
				selectlist: [
					{ value: '1', label: '值1' },
					{ value: '2', label: '值2' },
					{ value: '3', label: '值3' },
				],
				radiolist: [
					{ value: '1', label: '值1' },
					{ value: '2', label: '值2' },
					{ value: '3', label: '值3' },
				],
				radiolist1: [
					{ value: '1', label: '值12' },
					{ value: '2', label: '值22' },
					{ value: '3', label: '值33' },
				],
			},
			testForm: {
				name: '',
				name1: '',
				selectlist: '',
				radiolist: '',
				radiolist1: '',
				textarea1: '',
				date1: '',
				depart: '',
				departname: '',
			},
			pageType: 'add',
			publisherVisible: false,
		};
	},
	methods: {
		async handleSave() {
			let data = await this.$refs.zFormRef.validate();
			alert(JSON.stringify(data));
		},
		handleSetVal(key, val) {
			this.testForm[key] = val;
		},
		// 编写人
		handleOpenPublisher() {
			// console.log(this);
			this.publisherVisible = true;
		},
		// 编写人
		handSetSearchPublisher: function (row) {
			// 给表单设置值
			this.testForm.departname = row.userName;
			this.testForm.depart = row.id;
			this.publisherVisible = false;
		},
		// 设置成查看
		handleSetPageType(type) {
			this.pageType = type;
		},
		handleReset() {
			this.$refs.zFormRef.reset();
		},
	},
};
</script>

<style lang="sass" scoped></style>
